<template>
	<view class="sign">
		<view class="area" @click="signAreas">
			<view v-if="signArea == ''" class="name">签字区域</view>
			<image class="image" v-else :src="`${BASE_URL}/jeecg-system/sys/common/static/${signArea}`"></image>
		</view>
		<u-modal v-model="show" title="签名" width="96%"  @confirm="confirm" @cancel="clear"  cancel-text="取消" :mask-close-able="false" :show-cancel-button="true">
			<zwp-draw-pad ref="drawPad" class="canvas" :width="screenWidth - 40" :height="200"></zwp-draw-pad>
		</u-modal>
	</view>
</template>
<script>
	import ZwpDrawPad from './zwp-draw-pad.vue'
	const getTokenStorage = () => {
		let token = ''
		try {
			token = uni.getStorageSync('ACCESS_TOKEN')
		} catch (e) {
			//TODO handle the exception
		}
		return token
	}
	const getUserId = () => {
		let user_id = ''
		try{
			user_id = uni.getStorageSync('userInfo').id
		}catch(e){
			//TODO handle the exception
		}
		return user_id
	}
	import {
		UPLOAD
	} from '../../api/urls.js';
	import { BASE_URL } from '../../utils/baseUrl.js';
	
	export default {
		name:"sign",
		components: {
			ZwpDrawPad
		},
		model: {
			prop: 'signArea',
			event: 'change',
		},
		props: {
			signArea: {
				type: String,
				default: '',
			},
			disabled: {
				type: Boolean,
				default: false,
			}
		},
		data() {
			return {
				BASE_URL,
				screenWidth: this.screenWidth,
				show: false,
			};
		},
		methods: {
			//清除
			clear(){
				this.$refs.drawPad.init();
			},
			//签字
			signAreas(){
				if(this.disabled) return;
				this.$refs.drawPad && this.clear();
				this.show = true;
			},
			confirm(){
				const _this = this;
				const options = {
				    x:0,
				    y:0,
				    width: this.screenWidth - 40,
				    height: 200,
				    destWidth: this.screenWidth - 40,
				    destHeight: 200,
				    fileType: 'jpg',
				    quality: 1
				}
				this.$refs.drawPad.save(options).then(res => {
					_this.uploadImage(res.tempFilePath);
				});
			},
			//上传图片
			uploadImage(filePath) {
				const _this = this;
				uni.uploadFile({
					url: BASE_URL + UPLOAD,
					filePath,
					name: 'file',
					formData: {
						biz: 'temp',
					},
					header: {
						'Authorization': getTokenStorage(),
						'client-id': 'app_erp',
						'user-id': getUserId()
					},
					success(res) {
						const _data = JSON.parse(res.data);
						if (_data.success) {
							uni.showToast({
								title: '签名成功',
								icon: 'none'
							})
							_this.$emit('change', _data.message)
							_this.$emit('hasCancleBtn')
						} else {
							uni.showToast({
								title: _data.message,
								icon: 'none'
							})
						}
					},
					fail(error) {
						console.log(error);
					}
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.sign{
		width: auto;
		background: #F5F5F5;
		padding: 20rpx;
		.area{
			width: 300rpx;
			height: 150rpx;
			margin: 0 auto;
			display: block;
			background: #F5F5F5;
			border-radius: 2px;
			display: flex;
			align-items: center;
			justify-content: center;
			.name{
				color: #999;
				font-size: 16px;
			}
			.image{
				width: 300rpx;
				height: 150rpx;
				display: block;
			}
		}
		.canvas{
			width: auto;
			margin: 20rpx auto 0;
			background: #F5F5F5;
			border-radius: 2px;
			border: 1px solid #EAEAEA;
		}
	}
</style>
